<template>
  <div>
    <el-upload
      :multiple="false"
      accept="image/*"
      action="https://conosle.exploent.com"
      :file-list="fileList"
      :show-file-list="true"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      class="editor-slide-upload"
      list-type="picture-card"
    >
      <i slot="default" class="el-icon-plus" />
    </el-upload>
  </div>
</template>

<script>
import upload from '@/utils/upload'
import checkSize from '@/utils/check-image'
export default {
  name: 'SingleImageUpload2',
  props: {
    img: {
      type: String,
      default: null
    },
    isSize: {
      type: Boolean,
      default: false
    },
    isOne: {
      type: Boolean,
      default: true
    },
    maxImg: {
      type: Int8Array,
      default: 0
    }
  },
  data() {
    return {
      listObj: {},
      fileList: []
    }
  },
  watch: {
    img: function(newValue, oldValue) {
      if (newValue) {
        if (Array.isArray(newValue)) {
          this.fileList = newValue
        } else {
          this.fileList = [{ url: newValue }]
        }
      } else {
        this.fileList = []
      }
    }
  },
  created() {
    if (this.img && Array.isArray(this.img)) {
      this.fileList = this.img
    } else if (this.img && !Array.isArray(this.img)) {
      this.fileList = [{ url: this.img }]
    }
  },
  methods: {
    handleSuccess(response, file) {
      const uid = file.uid
      const objKeyArr = Object.keys(this.listObj)
      for (let i = 0, len = objKeyArr.length; i < len; i++) {
        if (this.listObj[objKeyArr[i]].uid === uid) {
          this.listObj[objKeyArr[i]].hasSuccess = true
          return
        }
      }
      this.$emit('change', this.fileList, 'success')
    },
    handleRemove(file) {
      this.fileList = this.fileList.filter(v => {
        return v.uid !== file.uid
      })
      this.$emit('change', this.fileList, 'remove')
    },
    beforeUpload(file) {
      const fileName = file.uid
      this.listObj[fileName] = {}
      upload(file, 'img').then(res => {
        if (this.isSize) {
          checkSize(file).then((imgSize) => {
            this.listObj[fileName] = { hasSuccess: true, name: file.name, uid: file.uid, url: res, size: imgSize }
            const fileObject = { hasSuccess: true, name: file.name, uid: file.uid, url: res, size: imgSize }
            if (this.maxImg > 0 && this.fileList.length === 9) {
              this.$message.error('最多只能添加' + this.fileList.length + '张图片')
            } else if (this.isOne) {
              this.fileList = [].concat([fileObject])
            } else {
              this.fileList.push(fileObject)
            }
            this.$emit('change', this.fileList, 'upload')
          })
        } else {
          this.listObj[fileName] = { hasSuccess: true, uid: file.uid, url: res }
          const fileObject = { hasSuccess: true, uid: file.uid, url: res }
          this.fileList = [].concat([fileObject])
          this.$emit('change', this.fileList, 'upload')
        }
      })
      return false
    }
  }
}
</script>
